<template>
  <div class="user-center">
    <heads title="个人中心" :LeftArrow="false"></heads>
    <div class="main-box">
      <div
        class="head flex"
        :style="'backgroundImage:url('+ require('@/assets/images/icon-bg.png') +')'"
      >
        <div class="head-item flex space-between">
            <div class="head-item-left flex">
                     <van-image
            round
            width="1.14rem"
            height="1.14rem"
            :src="userInfo.avatar"
          />
          <div class="head-item-right">
            <h1>{{ userInfo.nick }} </h1>
            <!-- <p>{{ userInfo.mobile }}</p> -->
          </div>
          <div class="ver-box flex"  :class="detail && detail.is_check && detail.is_check === 2  ? 'btn-grey' : 'btn-primary'">
            <!-- <img src="@/assets/images/icon-verify.png" alt="">{{ detail && detail.is_check && detail.is_check === 2 ? '未认证' : '已认证' }} -->
            </div>
            </div>
            <div class="head-item-right">
               <van-cell is-link value="个人资料" to="/userProfile" />
            </div>
        </div>
      </div>
      <div class="content-box">
        <div class="content flex space-around">
           <router-link :to="{path:'/sendList',query:{type:'1'}}" >
          <div class="content-head" >
           <img slot="icon" src="@/assets/images/icon-file.png" alt />
            <p class="grey">我的发布</p>
          </div>
          </router-link>
          <div class="line"></div>
           <router-link :to="{path:'/orderList',query:{type:'2'}}">
          <div class="content-head">
           <img slot="icon" src="@/assets/images/icon-file.png" alt />
            <p class="grey">我卖出去的</p>
          </div>
          </router-link>
          <div class="line"></div>
           <router-link :to="{path:'/orderList',query:{type:'3'}}">
          <div class="content-head">
           <img slot="icon" src="@/assets/images/icon-file.png" alt />
            <p class="grey">我买到的</p>
          </div>
          </router-link>
          <div class="line" ></div>
           <router-link :to="{path:'/orderList',query:{type:'4'}}">
           <div class="content-head" >
           <img slot="icon" src="@/assets/images/icon-file.png" alt />
            <p class="grey">我收藏的</p>
          </div>
          </router-link>
        </div>
        <div class="cell-box">
          
           <!-- <router-link :to="{path:'/verifyList'}">
            <van-cell title="我的认证" class="flex">
              <img slot="icon" src="@/assets/images/icon-004.png" alt />
              <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
          </router-link> -->

          <!-- <router-link :to="{path:'/login'}" > -->
            <van-cell title="退出登录" class="flex" @click="logOut()">
              <img slot="icon" src="@/assets/images/icon-001.png" alt />
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
          <!-- </router-link> -->
         
          <!-- <router-link :to="{path:'/adressList'}" >
            <van-cell title="管理收货地址" class="flex">
              <img slot="icon" src="@/assets/images/icon-001.png" alt />
              <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
          </router-link>
           <router-link :to="{path:'/verify'}">
            <van-cell title="实名认证" class="flex">
              <img slot="icon" src="@/assets/images/icon-004.png" alt />
              <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
          </router-link>
          <router-link :to="{path:'/systemList'}">
            <van-cell title="系统消息" class="flex">
              <img slot="icon" src="@/assets/images/icon-002.png" alt />
              <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
          </router-link>
          <router-link :to="{path:'/contactUs'}">
            <van-cell title="联系我们" class="flex">
              <img slot="icon" src="@/assets/images/icon-003.png" alt />
              <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
          </router-link>
           -->
        </div>
      </div>
    </div>
    <foots :active="4"></foots>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Dialog } from "vant"
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve),
    foots: resolve => require(["@/components/common/foots"], resolve)
  },
  data() {
    return {
      verify:'0',//0未认证 1已认证
      username: "",
      password: "",
      detail:{}
    };
  },
  computed:{
    ...mapState(['roles','userInfo'])

  },
  methods: {
    // 退出登录
    logOut(){
       let _this = this;
        

Dialog.confirm({
  title: '提示',
  message: '确定要退出吗？',
  confirmButtonColor:'#5bbd97',
  beforeClose:_this.beforeClose,
});
    

    },
    beforeClose(action, done) {
      let _this = this
      if (action === 'confirm') {
        done()
         _this.$store.commit('removeUser',{}); 
          _this.$router.push({ path: "/login", query: {} });
      } else {
        done();
      }
    },
    
    getData() {
      let _this = this;

      _this.$ajax
        .post(`${_this.$baseUrl}/user/getUserIndexNum`)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.detail = res.data.data
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    
  },
  created() {

    // this.getData()
  }
};

 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.user-center {
  font-size: 0.3rem;
  box-sizing: border-box;
  min-height: 100vh;

  .logo {
    width: 2.52rem;
    margin: 1rem auto;
  }
  /deep/ .van-nav-bar{
    background: #3D9D30;
  }
  .head {
    height: 3.04rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 0 0.3rem;
    box-sizing: border-box;
    .head-item {
      width: 100%;
      padding: 0 0.3rem;
      box-sizing: border-box;
      font-size: 0.3rem;
      justify-content: flex-start;
      margin-top: -0.6rem;
      .van-cell{
        background-color: transparent;
        .van-cell__value--alone{
          color: #eee
        }
        .van-cell__right-icon{
          color: #eee;
        }
      }
      .ver-box{
        font-size: .2rem;
        line-height: .4rem;
        min-width: 1.1rem;
        border-radius: .4rem;
        text-align: center;
        margin-left: .3rem;
        &.btn-grey{
          background: #818181;
        }
         &.btn-primary{
          background: #3D9D30;
        }
        img{
          width: .2rem;
          margin-right: 2px;
        }
      }
      .van-image {
        margin-right: 0.3rem;
        border: 1px solid #fff
      }
    }
  }
  .content-box {
    padding: 0 0.3rem;
    box-sizing: border-box;
  }
  .content {
    background: #ffffff;
    // box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0.35rem 0.1rem;
    box-sizing: border-box;
    position: relative;
    font-size: 0.24rem;
    color: #999;
    margin-top: -1.1rem;
    a{
      flex:1
    }
    h1 {
      font-size: 0.34rem;
      color: #333;
    }

    .line {
      width: 1px;
      height: 0.8rem;
      background: #f4f4f4;
    }
  }
  .content-head {
    text-align: center;
    font-size: 0.26rem;
    align-items: center;
    color: #333;

    h1 {
      font-size: 0.46rem;
      color: #333;
    }
    img {
      width: 0.6rem;
      margin-bottom: .1rem
    }
  }
  .cell-box {
    padding: 0 0.3rem;
    box-sizing: border-box;
    background: #fff;
    margin-top: 0.3rem;
    border-radius: 0.1rem;
    .van-icon {
      color: #979797;
    }
    .van-cell {
      border-bottom: 0.5px solid #f0f0f0;
      &:last-child{
        border-bottom: none
      }
    }
    img {
      width: 0.32rem;
      height: 0.32rem;
      margin-right: 0.3rem;
    }
    i {
      color: #999;
      font-size: 0.32rem;
    }
  }

  .van-cell {
    padding: 0.3rem 0;
    .van-cell__title {
      text-align: left;
      font-size: 0.28rem;
    }
  }
  .btn-box {
    box-sizing: border-box;
    padding: 1.5rem 16px;
  }
  .head-item-right{
    text-align: left
  }
}
</style>
